@charset 'UTF-8';
/*
 * $id:ext/jquery/plugins/jquery.oscProductImage.css
 *
 * oscProductImage version 1.0
 *
 * Copyright 2011, Zaenal Muttaqin
 * http://blog.lokamaya.net - http://lokamaya.com
 *
 * Licensed under the MIT license:
 * http://creativecommons.org/licenses/MIT/
 *
 */

/* product form CSS-UI (please edit as necesserely) */


/* table row heading */
tr.trImageHead {background-color:#ebebff;}
tr.trImageHead td {}
/* table row image display & list */
tr.trImageList td.preview {width:160px; background: #fbfbff; border-bottom: 1px solid #ebebff;}
tr.trImageList td.listing {padding-left:30px; background: #fbfbfb; border-bottom: 1px solid #ebebff;}
tr.trImageList div.clear, .opiDialog div.clear {height: 1px !important; float:none !important; overflow:hidden; clear:both;}

#opiContainer {position:relative; font-size: 10px; line-height:14px;}

/* oscProductImage Dialog CSS-UI */
.opiDialog, .opiDialog a {font-size: 11px; line-height:14px;}
.opiDialog .content {margin:0 auto; padding:0px; position: relative;}
.opiDialog .divcentered {display: table-cell; vertical-align: middle; text-align:center;}
#opiBrowseDialog .content {padding-left: 10px; overflow: hidden;}
#opiAlertDialog .content {width: 98%;}

.opiDialog dl {margin: 5px auto; padding:0;}
.opiDialog dl.dlcentered {position: relative; width: 250px; margin: 5px auto; padding:0;}
.opiDialog dl dt {margin:8px 0px 1px 0px; padding-left:2px; font-weight:bold; color: #1d5987;}
.opiDialog dl dd {margin:0; padding:0px; margin-bottom: 5px; border:1px solid white; border-color: transparent;}
.opiDialog dl dd.buttons, .opiDialog dl dt.buttons {padding:5px 1px; text-align: right;}

#uploadInProcess {position:fixed; top:0; left: 0; font:10px/20px arial, sans-serif; color:#777;}
#uploadInProcess span {display:block; width:inherit; height:inherit; background: #f2f2f2;}
#uploadInProcess div {position:absolute; width:100%; height:51%; top:48%; text-align:center; background: url('jquery.oscProductImage-loader.gif') no-repeat center top;}
#uploadPreview {list-style:none; margin:0; padding:0; text-align: center; width: 250px; min-height: 250px; border: 1px solid #eee;}
#uploadPreview b {color:#ee934f; display: block; padding-top: 10px;}
#uploadPreview i {text-transform: lowercase; display: block; font-style: normal;}
#uploadPreview.available b, #uploadPreview.available i {display:none;}
.opiDialog #uploadPreview li {position:relative; margin:0; padding:0;}
.opiDialog #uploadPreview #uploadPreviewImage {background: #f2f3f4; color:#79b7e7; font-weight:bold; width: 250px; height: 250px; overflow: hidden;}
.opiDialog #uploadPreview #uploadPreviewImage div {width: 240px; height:240px; border:5px solid #f2f3f4; text-align: center;}
.opiDialog #uploadPreview #uploadPreviewImage, .opiDialog #uploadPreview #uploadPreviewImage div { display: table-cell; vertical-align: middle; text-align:center;}
.opiDialog #uploadPreview #uploadPreviewInfo {font-size:11px; height: 30px; line-height:30px; background: #fff; border-top:1px solid #fff; color:#999;}
.opiDialogs #uploadPreview img, .opiDialog #uploadPreview canvas {max-width: 140px; max-height: 240px;}
.opiDialogs #uploadPreview li div {padding: 0px; font: 11px/15px  arial, sans-serif !important;}
.opiDialogs #uploadPreview li div strong, .opiDialog #uploadPreview li div i {display:block}
.opiDialog div.dlLeft {float:left;}
.opiDialog div.dlRight {margin-left: 260px;}
.opiDialog div.dlRight dl {padding-top:45px;}

.opiDialogLoading .content, .opiBrowseLoading .content {background: url('jquery.oscProductImage-loader.gif') no-repeat center center}
.opiDialogLoading .content .contentWrap {visibility: hidden;}
.opiBrowseLoading .content .opiImageListing {visibility: hidden;}

.opiDialog .loader {
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    margin-top:20px;
}
.opiDialog .loader ul {font:10px/16px; margin:2px 0px; padding: 0; list-style: none; border: 1px solid #f2f2f2; background: #fafafa url('../../../images/icons/warning.gif') no-repeat 3px 6px; filter:alpha(opacity=70); opacity:0.7;}
.opiDialog .loader ul.error { background: #fafafa url('../../../images/icons/error.gif') no-repeat 3px 6px;}
.opiDialog .loader ul.success { background: #fafafa url('../../../images/icons/success.gif') no-repeat 3px 6px;}
.opiDialog .loader ul li {margin:0; padding:2px 10px;}
.opiDialog .loader div.loaderActive {display:block; height:15px; background: url('jquery.oscProductImage-loader.gif') no-repeat center center;}
#opiBrowseDialog .loader {position:absolute; width:95% !important;}


/* image listing UI (don't touch unless you're convinced) */
ul.opiImageListing {position:relative; list-style: none; margin:0; padding: 0;}
#opiBrowseDialog ul.opiImageListing {margin-top: 15px;}
ul.opiImageListing li {float:left; min-height:115px; list-style: none; min-height:115px; text-align:center; margin: 2px 3px 3px 2px;}
ul.opiImageListing li.deleted {background: #eee url('jquery.oscProductImage-spinner.gif') no-repeat center center;}
ul.opiImageListing li.deleted * {visibility: hidden;}
ul.opiImageListing li div.loading, .opiImageListing li div.animated {background-image: url('jquery.oscProductImage-spinner.gif') !important;}
ul.opiImageListing li div.loading img, .opiImageListing li div.animated img {filter:alpha(opacity=0); opacity:0;}
ul.opiImageListing li div.rel {position: relative; padding:5px 5px 0px 5px;}
ul.opiImageListing li div.img {display: table-cell; vertical-align: middle; text-align:center; width: 80px; height: 80px; line-height:80px; overflow:hidden; background: #f9f9f9; border:1px solid #eee; background-position: center center; background-repeat: no-repeat;}
ul.opiImageListing li div.img img, .ui-effects-transfer img {max-width: 80px; max-height: 80px;}
/* image listing button */
ul.opiImageListing li div.buttons {position:relative; margin:0px auto; padding: 3px 0px;}
ul.opiImageListing li div.buttons button.ui-icon-centered {margin:1px 0px 1px 1px; padding:1px;}
ul.opiImageListing li div.buttons button.ui-icon-centered span {position:static !important;}
ul.opiImageListing li div.buttons button.ui-icon-centered span.ui-button-text {display:none !important;}
ul.opiImageListing li div.buttons button.ui-icon-centered span.ui-icon {margin: 0px; padding: 0px;}

/* dialog form CSS (don't touch unless you're convinced) */
.opiDialog .selector label.inside {position:absolute; padding: 3px 5px; color: #222222;}
.opiDialog .inputWrapper label.inside {filter:alpha(opacity=50); opacity:0.5;}
.opiDialog .selector {position:relative; height:24px; width:100%;}
.opiDialog .selector button {position:absolute; z-index:2; right:0px; top:0px; padding:0px; margin:0px;}
.opiDialog .selector button span.ui-button-text {height:24px; width:28px; padding:0px; margin:0px;}
.opiDialog .selector input {width:98%; padding-left: 2px; height:22px; line-height: 22px; background: none; background-image: none; border: none; color: #111111;}
.opiDialog .selector input.ui-helper-input {width:99%;}
.opiDialog .selector ul, .opiDialog .selector ul li, .opiDialog .selector ul li span {margin:0; padding:0; list-style: none; cursor: default; cursor: pointer;}
.opiDialog .selector .dropdownContainer {display:block; position:absolute; max-height:100px; z-index: 5000; min-width:99%; width:99%; padding:0px 0px 1px 0px; filter:alpha(opacity=100); opacity:1;}
.opiDialog .selector .dropdownContainer span {position:relative; display:block; max-height:100px; width:100%; overflow:auto; overflow-x: hidden; -ms-overflow-y: hidden; z-index: 5001; background:none; background-image:none; background-color: #fff; filter:alpha(opacity=100); opacity:1;}
.opiDialog .selector ul {background:none; background-image:none; background-color: #fff; filter:alpha(opacity=100); opacity:1;}
.opiDialog .selector ul li {padding:2px 4px; white-space:nowrap; border-bottom: none; border-left:none; border-right:none; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.opiDialog .selector ul li.first {border-top:none;}
.opiDialog .selector ul li:hover {background: none; background: transparent;}

/* jQuery transfer effect (Image Browser Dialog) */
.ui-effects-transfer {border: none !important; z-index: 9000; padding:0; margin:0;}
.ui-effects-transfer-border, .ui-effects-transfer div {border: 2px dotted #ccc !important;  display: table-cell; vertical-align: middle; text-align:center;}
#uploadBtnCreateDir, #createBtnBack {position: absolute; left:15px;}
#opiImageDefault {min-height: 270px; text-align: center;}
#opiImageDefault.loading {background: #fff url('jquery.oscProductImage-spinner.gif') no-repeat center 30px;}
#opiImageTransfered {display:block; position:absolute; width:10px; height:10px; overflow:hidden;} 


/* page x of y - from z files (Image Browser Dialog) */
div.ui-dialog-buttonleft {float:left;}
div.ui-dialog-label {padding: 12px 1px 1px 15px;}
div.ui-dialog-label label {font-weight: bold;}
div.ui-dialog-label label {font-weight: bold;}
div.ui-dialog-buttonpane button.left {float:left;}

/* other jQuery utility */

/* default jQuery ui-helper-hidden does not work properly on several browser */
.ui-helper-opacity {position:absolute; outline: none; outline-style: none; background:none transparent; background-image:none transparent; border: none transparent; filter:alpha(opacity=0); opacity:0;}

/* bug on Dialog: can not disable auto-focus. So we prepend "a" element on top of every dialog */
a.opiDisableAutoFocus {outline: none; outline-style: none; position:absolute;}

.ui-state-warning .ui-icon, .ui-state-warning-text .ui-icon {}

